<template>
  <FormItem :block="block" v-bind="formItemProps" :rules="computeRules" :disabled="inputDisabled">
    <template #default>
      <Attachments
        ref="attachments"
        :disabled="inputDisabled"
        :placeholder="computePlaceholder"
        :file-type-options="categories"
        v-bind="inputProps"
        :model="model"
        :unid="unid"
        v-on="listeners">
        <template #header-left>
          <slot name="header-left"></slot>
        </template>
      </Attachments>
    </template>
    <template #error="{ error }">
      <slot name="error" :error="error"></slot>
    </template>
    <template #label>
      <slot name="label"></slot>
    </template>
  </FormItem>
</template>

<script>
  import formInput from './form-input'
  import { validateAttachments } from '@/util/form-validate'
  import Attachments from './attachements/Attachments.vue'
  import { filterProperties, normalizeProps } from '@/util'

  const autoBindKeys = Object.keys(Attachments.props).filter(
    key => !['value', 'placeholder', 'disabled'].includes(key)
  )

  export default {
    name: 'FormAttachments',
    mixins: [formInput],
    props: {
      unid: String,
      model: String,
      block: {
        type: Boolean,
        default: true
      },
      categories: {
        type: Array,
        default: () => [{ value: 'other', label: '其它' }]
      }
    },
    computed: {
      inputProps() {
        return filterProperties({ ...normalizeProps(this.$attrs), ...this.$props }, autoBindKeys)
      }
    },
    methods: {
      validateAttachments,
      getRequireRule() {
        return {
          required: true,
          validator: this.validateAttachments,
          ref: 'attachments',
          options: this.categories
        }
      }
    }
  }
</script>
